<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GraphQL Mesh Example</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-color: #0d0d0d;
      }
      iframe {
        position: fixed;
        border: 0;
        width: 100%;
        height: 100%;
      }
      .error {
        padding: 1rem;
        font-family: system-ui, sans-serif;
      }
      body > .crisp-client {
        /* injected by website-router */
        display: none !important;
      }
    </style>
  </head>
  <body>
    <noscript>JavaScript is required to load the example.</noscript>
    <iframe
      src="https://codesandbox.io/embed/github/ardatan/graphql-mesh/tree/master/examples/json-schema-example"
      loading="eager"
      title="Example"
      allow="
        geolocation;
        microphone;
        camera;
        midi;
        vr;
        accelerometer;
        gyroscope;
        payment;
        ambient-light-sensor;
        encrypted-media;
        usb;
      "
      sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
      tabindex="-1"
      onload="window.scrollTo(0, 0)"
    ></iframe>
    <script>
      window.addEventListener('message', e => {
        // only trust messages from our own origin
        if (e.origin !== window.location.origin) return;
        if (!e.data || e.data.type !== 'set-dir') return;
        const dir = String(e.data.dir ?? '');
        // allow only simple slug names to avoid path/query injection
        if (!/^[a-z0-9-]+$/i.test(dir)) return;
        const iframe = document.querySelector('iframe');
        iframe.src = `https://codesandbox.io/embed/github/ardatan/graphql-mesh/tree/master/examples/${encodeURIComponent(dir)}`;
      });
    </script>
  </body>
</html>
